<template>
    <div>
        <!-- 展示store 全局状态中的数据 -->
        <p @click="addCount">store中的count:{{ count }} </p>
        <p @click="addAge">store中的userinfo:{{ userinfo.name }}--{{ userinfo.age }} </p>
        <p>store中的计算属性 doubleCount:{{ doubleCount }}</p>
    </div>
</template>

<script setup>

// 在页面中使用store数据
// 第一步: 引入store
import { useUserStore } from '@/store/userStore.js';
import { storeToRefs } from 'pinia';
const userStore = useUserStore();

// console.log(userStore);
// 注意: 当解构store中导出的数据时, ref引用的数据会丢失响应式, 需要借助 storetoRef 方法将其处理变成响应式

let { count,
    doubleCount,
} = storeToRefs(userStore);

// console.log(count, doubleCount);
// 注意: 修改store中的数据的action 方法是不需要处理的,因为方法不需要响应式,只有数据才需要响应式
const { userinfo } = userStore;
// console.log(addAge, userinfo);
// 修改count 的值
const addCount = () => {
    count.value++
}

const addAge = () => {
    userinfo.age++
}

</script>
<style scoped>

</style>